<template>
    <div class="wrapper">
        <div class="easy-content">
            <div class="left">
                <ul>
                    <li v-for="(item,index) in meetingTitleList"
                        :key="index"
                        @click="handleClick(item,index)"
                        :class="{'actived': index == indexItem}">
                        {{item.configName}}
                    </li>
                </ul>
            </div>
            <div class="right">
                <el-form>
                    <el-form-item>
                        <el-button class="fr"
                            type="primary"
                            size="small"
                            @click="_add"
                            v-has="'meetingtitleadd'"> 新增 </el-button>
                    </el-form-item>
                    <el-form-item>
                        <!-- 会议室 -->
                        <el-table :data="dataList"
                            style="width: 100%"
                            max-height="600"
                            v-show="indexItem == 0">
                            <el-table-column prop="name"
                                label="会议室名称"
                                min-width="100">
                            </el-table-column>
                            <el-table-column prop="site"
                                label="位置">
                            </el-table-column>
                            <el-table-column prop="area"
                                label="面积">
                            </el-table-column>
                            <el-table-column prop="height"
                                label="楼高">
                            </el-table-column>
                            <el-table-column prop="shape"
                                label="形状">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.shape == 1">矩形</span>
                                    <span v-if="scope.row.shape == 2">圆形</span>
                                    <span v-if="scope.row.shape == 3">方形</span>
                                    <span v-if="scope.row.shape ==4">不规则形</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="是否有柱"
                                prop="pillar">
                                <template slot-scope="scope">
                                    {{scope.row.pillar == 1 ? "有":"无"}}
                                </template>
                            </el-table-column>
                            <el-table-column label="剧院式容纳">
                                <template slot-scope="scope">
                                    {{scope.row.theater ? scope.row.theater: '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="课桌式容纳">
                                <template slot-scope="scope">
                                    {{scope.row.desk ? scope.row.desk: '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="鱼骨型容纳">
                                <template slot-scope="scope">
                                    {{scope.row.fishbone ? scope.row.fishbone: '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="回字型容纳">
                                <template slot-scope="scope">
                                    {{scope.row.backOrd ? scope.row.backOrd: '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="宴会式容纳">
                                <template slot-scope="scope">
                                    {{scope.row.banquet ? scope.row.banquet: '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="U型容纳">
                                <template slot-scope="scope">
                                    {{scope.row.uType ? scope.row.uType: '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right"
                                label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text"
                                        size="small"
                                        @click="_update_(scope.row)"
                                        v-has="'meetingtitlechange'">修改</el-button>
                                    <el-button type="text"
                                        size="small"
                                        @click="_delete(scope.row.id)"
                                        v-has="'meetingtitledelete'">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 会议规模 -->
                        <el-table :data="dataList"
                            style="width: 100%"
                            max-height="600"
                            v-show="indexItem == 1">
                            <el-table-column prop="id"
                                label="编号">
                            </el-table-column>
                            <el-table-column prop="scale"
                                label="会议规模">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.scale ==1">10~50人</span>
                                    <span v-else-if="scope.row.scale ==2">51~100人</span>
                                    <span v-else-if="scope.row.scale ==3">101~150人</span>
                                    <span v-else-if="scope.row.scale ==4">151~300人</span>
                                    <span v-else-if="scope.row.scale ==5">301~500人</span>
                                    <span v-else-if="scope.row.scale ==6">501~1000人</span>
                                    <span v-else-if="scope.row.scale ==7">1000人以上</span>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right"
                                label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text"
                                        size="small"
                                        @click="_update_(scope.row)"
                                        v-has="'meetingtitlechange'">修改</el-button>
                                    <el-button type="text"
                                        size="small"
                                        @click="_delete(scope.row.id)"
                                        v-has="'meetingtitledelete'">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 会议类型 -->
                        <el-table :data="dataList"
                            style="width: 100%"
                            max-height="600"
                            v-show="indexItem == 2">
                            <el-table-column prop="id"
                                label="编号">
                            </el-table-column>
                            <el-table-column prop="type"
                                label="会议类型">
                            </el-table-column>
                            <el-table-column fixed="right"
                                label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text"
                                        size="small"
                                        @click="_update_(scope.row)"
                                        v-has="'meetingtitlechange'">修改</el-button>
                                    <el-button type="text"
                                        size="small"
                                        @click="_delete(scope.row.id)"
                                        v-has="'meetingtitledelete'">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 会议要求 -->
                        <el-table :data="dataList"
                            style="width: 100%"
                            max-height="600"
                            v-show="indexItem == 3">
                            <el-table-column prop="id"
                                label="编号">
                            </el-table-column>
                            <el-table-column prop="require"
                                label="会场要求">
                            </el-table-column>
                            <el-table-column prop="unit"
                                label="单位">
                            </el-table-column>
                            <el-table-column fixed="right"
                                label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text"
                                        size="small"
                                        @click="_update_(scope.row)"
                                        v-has="'meetingtitlechange'">修改</el-button>
                                    <el-button type="text"
                                        size="small"
                                        @click="_delete(scope.row.id)"
                                        v-has="'meetingtitledelete'">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 付款方式 -->
                        <el-table :data="dataList"
                            style="width: 100%"
                            max-height="600"
                            v-show="indexItem == 4">
                            <el-table-column prop="id"
                                label="编号">
                            </el-table-column>
                            <el-table-column prop="payment"
                                label="付款方式">
                            </el-table-column>
                            <el-table-column fixed="right"
                                label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text"
                                        size="small"
                                        @click="_update_(scope.row)"
                                        v-has="'meetingtitlechange'">修改</el-button>
                                    <el-button type="text"
                                        size="small"
                                        @click="_delete(scope.row.id)"
                                        v-has="'meetingtitledelete'">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item>
                        <el-pagination @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 新增编辑弹窗 -->

        <!-- 新增修改会议室弹窗 -->
        <el-dialog :title="title"
            class="room-item"
            :visible.sync="dialogVisibleRoom"
            width="550px">
            <el-form label-width="80px">
                <el-form-item label="会议室名称"
                    required>
                    <el-input clearable
                        maxlength="30"
                        placeholder="请输入会议室名称"
                        v-model="name"></el-input>
                </el-form-item>
                <el-form-item label="位置"
                    required>
                    <el-input clearable
                        placeholder="请输入位置"
                        maxlength="30"
                        v-model="site"></el-input>
                </el-form-item>
                <el-form-item label="面积"
                    required>
                    <el-input clearable
                        placeholder="请输入面积"
                        class="input1"
                        v-model="area"
                        maxlength="4"
                        @keyup.native="area = area.replace(/[^\.\d]/g,'')"></el-input>
                    <span>m²</span>
                </el-form-item>
                <el-form-item label="楼高"
                    required>
                    <el-input clearable
                        class="input1"
                        placeholder="请输入楼高"
                        v-model="height"
                        maxlength="3"
                        @keyup.native="height = height.replace(/[^\.\d]/g,'')"></el-input>
                    <span>m</span>
                </el-form-item>
                <el-form-item label="形状"
                    required>
                    <el-select v-model="shape">
                        <el-option value="1"
                            label="矩形"></el-option>
                        <el-option value="2"
                            label="圆形"></el-option>
                        <el-option value="3"
                            label="方形"></el-option>
                        <el-option value="4"
                            label="不规则形"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否有柱"
                    required>
                    <el-radio-group v-model="pillar">
                        <el-radio label="1">有柱</el-radio>
                        <el-radio label="2">无柱</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="容纳人数"
                    required>
                </el-form-item>
                <el-form-item>
                    <ul>
                        <li class="clearfix">
                            <label class="fl">剧场式</label>
                            <el-input clearable
                                v-model="theater"
                                class="fl input"
                                maxlength="4"
                                @keyup.native="theater = theater.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                            <span class="fl">人</span>
                        </li>
                        <li class="clearfix">
                            <label class="fl">课桌式</label>
                            <el-input clearable
                                v-model="desk"
                                class="fl input"
                                maxlength="4"
                                @keyup.native="desk = desk.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                            <span>人</span>
                        </li>
                        <li class="clearfix">
                            <label class="fl">鱼骨式</label>
                            <el-input clearable
                                v-model="fishbone"
                                maxlength="4"
                                class="fl input"
                                @keyup.native="fishbone = fishbone.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                            <span>人</span>
                        </li>
                        <li class="clearfix">
                            <label class="fl">U 字式</label>
                            <el-input clearable
                                v-model="uType"
                                maxlength="4"
                                class="fl input"
                                @keyup.native="uType = uType.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                            <span>人</span>
                        </li>
                        <li class="clearfix">
                            <label class="fl">回型式</label>
                            <el-input clearable
                                v-model="backOrd"
                                maxlength="4"
                                class="fl input"
                                @keyup.native="backOrd = backOrd.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                            <span>人</span>
                        </li>
                        <li class="clearfix">
                            <label class="fl">宴会式</label>
                            <el-input clearable
                                v-model="banquet"
                                maxlength="4"
                                class="fl input"
                                @keyup.native="banquet = banquet.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                            <span>人</span>
                        </li>
                    </ul>
                </el-form-item>
            </el-form>
            <span slot="footer"
                class="dialog-footer">
                <el-button @click="dialogVisibleRoom = false">取 消</el-button>
                <el-button type="primary"
                    @click="_updateMeetingRoom">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增修改会议规模弹窗 -->
        <el-dialog :title="title"
            :visible.sync="dialogVisibleScale"
            width="300px">
            <el-form label-width="80px">
                <el-form-item label="会议室规模"
                    required>
                    <el-select v-model="scale">
                        <el-option label="10~50人"
                            value="1"></el-option>
                        <el-option label="51~100人"
                            value="2"></el-option>
                        <el-option label="101~150人"
                            value="3"></el-option>
                        <el-option label="151~300人"
                            value="4"></el-option>
                        <el-option label="301~500人"
                            value="5"></el-option>
                        <el-option label="500~1000人"
                            value="6"></el-option>
                        <el-option label="1000以上"
                            value="7"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer"
                class="dialog-footer">
                <el-button @click="dialogVisibleScale = false">取 消</el-button>
                <el-button type="primary"
                    @click="_updateMeetingScale">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增修改会议类型弹窗 -->
        <el-dialog :title="title"
            :visible.sync="dialogVisibleType"
            width="300px">
            <el-form label-width="80px">
                <el-form-item label="会议类型"
                    required>
                    <el-input placeholder="请输入会议类型"
                        v-model="typeName"
                        maxlength="30"
                        clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                class="dialog-footer">
                <el-button @click="dialogVisibleType = false">取 消</el-button>
                <el-button type="primary"
                    @click="_updateMeetingType">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增修改会议要求弹窗 -->
        <el-dialog :title="title"
            :visible.sync="dialogVisibleRequire"
            width="300px">
            <el-form label-width="80px">
                <el-form-item label="会议要求"
                    required>
                    <el-input placeholder="请输入会议要求"
                        v-model="required"
                        maxlength="30"
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="单位"
                    required>
                    <el-input placeholder="请输入单位"
                        v-model="unit"
                        maxlength="3"
                        clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                class="dialog-footer">
                <el-button @click="dialogVisibleRequire = false">取 消</el-button>
                <el-button type="primary"
                    @click="_updateMeetingRequire">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增修改付款弹窗 -->
        <el-dialog :title="title"
            :visible.sync="dialogVisiblePayment"
            width="300px">
            <el-form label-width="80px">
                <el-form-item label="付款方式"
                    required>
                    <el-input placeholder="请输入付款方式"
                        v-model="payment"
                        maxlength="30"
                        clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                class="dialog-footer">
                <el-button @click="dialogVisiblePayment = false">取 消</el-button>
                <el-button type="primary"
                    @click="_updateMeetingPayment">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
  getMeetingTitleList,
  getMeetingRoomList,
  getMeetingScaleList,
  getMeetingTypeList,
  getMeetingRequireList,
  getMeetingPaymentList,
  updateMeetingScale,
  deleteMeetingScale,
  updateMeetingType,
  deleteMeetingType,
  updateMeetingRequire,
  deleteMeetingRequire,
  updateMeetingPayment,
  deleteMeetingPayment,
  updateMeetingRoom,
  deleteMeetingRoom
} from "@/public/js/meetingConfig.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      meetingTitleList: [],
      indexItem: 0,
      dataList: [],
      titelId: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogVisibleRoom: false,
      dialogVisibleScale: false,
      dialogVisibleType: false,
      dialogVisibleRequire: false,
      dialogVisiblePayment: false,
      id: "",
      scale: "",
      title: "",
      typeName: "",
      required: "",
      unit: "",
      payment: "",
      name: "",
      site: "",
      area: "",
      height: "",
      shape: "",
      pillar: "1",
      theater: "",
      desk: "",
      fishbone: "",
      uType: "",
      backOrd: "",
      banquet: ""
    };
  },
  watch: {
    // dataList: {
    //   handler(newName, oldName) {
    //     if (newName.length) {
    //       this.pageNum = 1;
    //       this._getData(this.indexItem);
    //     }
    //   },
    //   deep: true
    // }
  },
  computed: {},
  methods: {
    handleClick(item, index) {
      this.titelId = item.id;
      this.pageSize = 10;
      this.pageNum = 1;
      if (index == this.indexItem) {
        return false;
      } else {
        this._getData(index);
      }
      this.indexItem = index;
    },
    _getData(index) {
      switch (index) {
        case 0:
          this._getMeetingRoomList();
          break;
        case 1:
          this._getMeetingScaleList();
          break;
        case 2:
          this._getMeetingTypeList();
          break;
        case 3:
          this._getMeetingRequireList();
          break;
        case 4:
          this._getMeetingPaymentList();
          break;
        default:
      }
    },
    // 新增
    _add() {
      switch (this.indexItem) {
        case 0:
          this.id = "";
          this.name = "";
          this.site = "";
          this.area = "";
          this.height = "";
          this.shape = "";
          this.pillar = "1";
          this.theater = "";
          this.desk = "";
          this.fishbone = "";
          this.uType = "";
          this.backOrd = "";
          this.banquet = "";

          this.title = "新增会议室";
          this.dialogVisibleRoom = true;
          break;
        case 1:
          this.id = "";
          this.scale = "";
          this.title = "新增会议规模";
          this.dialogVisibleScale = true;
          break;
        case 2:
          this.id = "";
          this.typeName = "";
          this.title = "新增会议类型";
          this.dialogVisibleType = true;
          break;
        case 3:
          this.id = "";
          this.unit = "";
          this.required = "";
          this.title = "新增会议要求";
          this.dialogVisibleRequire = true;
          break;
        case 4:
          this.id = "";
          this.payment = "";
          this.title = "新增付款方式";
          this.dialogVisiblePayment = true;
          break;
        default:
      }
    },
    // 删除
    _delete(id) {
      this.id = id;
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        switch (this.indexItem) {
          case 0:
            this._deleteMeetingRoom();
            break;
          case 1:
            this._deleteMeetingScale();
            break;
          case 2:
            this._deleteMeetingType();
            break;
          case 3:
            this._deleteMeetingRequire();
            break;
          case 4:
            this._deleteMeetingPayment();
            break;
          default:
        }
      });
    },
    // 修改
    _update_(item) {
      this.id = item.id;
      this.scale = item.scale;
      this.typeName = item.type;
      this.required = item.require;
      this.unit = item.unit;
      this.payment = item.payment;
      this.name = item.name;
      this.site = item.site;
      this.area = parseInt(item.area);
      this.height = parseInt(item.height);
      this.shape = item.shape;
      this.pillar = item.pillar;
      this.theater = item.theater;
      this.desk = item.desk;
      this.fishbone = item.fishbone;
      this.uType = item.uType;
      this.backOrd = item.backOrd;
      this.banquet = item.banquet;
      console.log(item);
      switch (this.indexItem) {
        case 0:
          this.title = "修改会议室";
          this.dialogVisibleRoom = true;
          break;
        case 1:
          this.title = "修改会议规模";
          this.dialogVisibleScale = true;
          break;
        case 2:
          this.title = "修改会议类型";
          this.dialogVisibleType = true;
          break;
        case 3:
          this.title = "修改会议要求";
          this.dialogVisibleRequire = true;
          break;
        case 4:
          this.title = "修改付款方式";
          this.dialogVisiblePayment = true;
          break;
        default:
      }
    },
    // 获取左侧title数据
    _getMeetingTitleList() {
      getMeetingTitleList().then(res => {
        this.meetingTitleList = res.data.configs;
        this.titelId = this.meetingTitleList[0].id;
        this._getMeetingRoomList();
      });
    },
    // 获取会议室列表数据
    _getMeetingRoomList() {
      console.log(111)
      getMeetingRoomList({
        titelId: this.titelId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then(res => {
         this.dataList = res.data.meetingRooms;
        this.total = res.data.total;
      });
    },
    // 获取会议规模列表数据
    _getMeetingScaleList() {
      getMeetingScaleList({
        titelId: this.titelId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then(res => {
        this.dataList = res.data.meetingScales;
        this.total = res.data.total;
      });
    },
    // 获取会议类型列表数据
    _getMeetingTypeList() {
      getMeetingTypeList({
        titelId: this.titelId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then(res => {
        this.dataList = res.data.meetingTypes;
        this.total = res.data.total;
      });
    },
    // 获取会场要求列表数据
    _getMeetingRequireList() {
      getMeetingRequireList({
        titelId: this.titelId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then(res => {
        this.dataList = res.data.meetingRequires;
        this.total = res.data.total;
      });
    },
    // 获取付款方式列表数据
    _getMeetingPaymentList() {
      getMeetingPaymentList({
        titelId: this.titelId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then(res => {
        this.dataList = res.data.meetingPayments;
        this.total = res.data.total;
      });
    },
    // 新增修改会议室
    _updateMeetingRoom() {
      // 表单验证

      if (!this.name) {
        this.$message.error("请输入会议室名称");
        return false;
      } else if (!this.site) {
        this.$message.error("请输入位置");
        return false;
      } else if (!this.area) {
        this.$message.error("请输入面积");
        return false;
      } else if (!this.height) {
        this.$message.error("请输入楼高");
        return false;
      } else if (!this.shape) {
        this.$message.error("请选择形状");
        return false;
      }
      // 容纳人数
      if (
        !this.theater &&
        !this.desk &&
        !this.fishbone &&
        !this.uType &&
        !this.backOrd &&
        !this.banquet
      ) {
        this.$message.error("请至少如何一种类型的容纳人数");
        return false;
      }

      updateMeetingRoom({
        mcId: this.titelId,
        id: this.id,
        name: this.name,
        site: this.site,
        area: this.area,
        height: this.height,
        shape: this.shape,
        pillar: this.pillar,
        theater: this.theater,
        desk: this.desk,
        fishbone: this.fishbone,
        uType: this.uType,
        backOrd: this.backOrd,
        banquet: this.banquet
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.dialogVisibleRoom = false;
          this._getMeetingRoomList();
        }
      });
    },
    // 删除会议室
    _deleteMeetingRoom() {
      deleteMeetingRoom({
        id: this.id
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingRoomList();
        }
      });
    },
    // 新增修改会议规模
    _updateMeetingScale() {
      let scale = this.scale.replace(/(^\s*)|(\s*$)/g, "");
      if (!scale) {
        this.$message.error("请选择会议规模");
        return false;
      }
      updateMeetingScale({
        mcId: this.titelId,
        id: this.id,
        scale: scale
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingScaleList();
          this.dialogVisibleScale = false;
        }
      });
    },
    // 删除会议规模
    _deleteMeetingScale() {
      deleteMeetingScale({
        id: this.id
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingScaleList();
        }
      });
    },

    // 新增修改会议类型
    _updateMeetingType() {
      let typeName = this.typeName.replace(/(^\s*)|(\s*$)/g, "");
      if (!typeName) {
        this.$message.error("请输入会议类型");
        return false;
      }
      updateMeetingType({
        mcId: this.titelId,
        id: this.id,
        typeName: typeName
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingRequireList();
          this.dialogVisibleType = false;
        }
      });
    },
    // 删除会议类型
    _deleteMeetingType() {
      deleteMeetingType({
        id: this.id
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingTypeList();
        }
      });
    },

    // 新增修改会议要求
    _updateMeetingRequire() {
      let require = this.required.replace(/(^\s*)|(\s*$)/g, "");
      let unit = this.unit.replace(/(^\s*)|(\s*$)/g, "");
      if (!require) {
        this.$message.error("请输入会议要求");
        return false;
      } else if (!unit) {
        this.$message.error("请输入会议单位");
        return false;
      }
      updateMeetingRequire({
        mcId: this.titelId,
        id: this.id,
        require: require,
        unit: unit
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingRequireList();
          this.dialogVisibleRequire = false;
        }
      });
    },
    // 删除会议要求
    _deleteMeetingRequire() {
      deleteMeetingRequire({
        id: this.id
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingRequireList();
        }
      });
    },
    // 新增付款方式
    _updateMeetingPayment() {
      let payment = this.payment.replace(/(^\s*)|(\s*$)/g, "");
      if (!payment) {
        this.$message.error("请输入付款方式");
        return false;
      }
      updateMeetingPayment({
        mcId: this.titelId,
        id: this.id,
        payment: payment
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingPaymentList();
          this.dialogVisiblePayment = false;
        }
      });
    },
    //删除付款方式
    _deleteMeetingPayment() {
      deleteMeetingPayment({
        id: this.id
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this._getMeetingPaymentList();
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this._getData(this.indexItem);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this._getData(this.indexItem);
    }
  },
  created() {
    this._getMeetingTitleList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  .easy-content {
    display: flex;
    padding-top: 30px;
    & > .left {
      width: 200px;
      background: #eef1f9;
      height: 600px;
      li {
        padding: 15px;
        background: #eef1f9;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
        &:hover,
        &.actived {
          background: #f5f7fa;
        }
      }
    }
    & > .right {
      flex: 1;
      padding-left: 30px;
    }
  }
  .room-item {
    .el-form-item {
      margin-bottom: 10px;
      .el-input {
        width: 300px;
      }
    }
  }
}
</style>